<% layout('/layouts/default.html', {title: '微课视频管理', libs: ['dataGrid']}){ %>
<div class="main-content">
	<div class="box box-main">
		<div class="box-header">

			<div class="box-tools pull-right">

				<!--				<a href="#" class="btn btn-default" id="btnSearch" title="${text('查询')}"><i class="fa fa-filter"></i> ${text('查询')}</a>-->
				<#form:form id="searchForm" model="${dcSupVideo}" action="${ctx}/video/dcSupVideo/listData" method="post" class="form-inline seach"
				data-page-no="${parameter.pageNo}" data-page-size="${parameter.pageSize}" data-order-by="${parameter.orderBy}">

				<div class="form-group">
					<label class="control-label">${text('视频名称')}：</label>
					<div class="control-inline">
						<#form:input path="videoName" maxlength="64" class="form-control width-160"/>
					</div>
				</div>
				<div class="form-group">
					<label class="control-label">${text('视频描述')}：</label>
					<div class="control-inline">
						<#form:input path="videoDescribe" class="form-control width-160"/>
					</div>
				</div>
			</#form:form>
			<div class="buggngruog ">
				<button  class="btn btn-primary btn-sm mr10" onclick="submit()">${text('查询')}</button>
				<button  class="btn btn-default btn-sm mr10" onclick="reload()">${text('重置')}</button>
				<% if(@UserUtils.getUser().getUserCode() == 'system'){ %>
				<a href="${ctx}/video/dcSupVideo/form" class="btn btn-primary btn-sm btnTool mr10" title="${text('新增微课视频')}"><i class="fa fa-plus"></i> ${text('新增')}</a>
				<% } %>
			</div>

			</div>
		</div>
		<div class="box-body b-bottom">
			<div>

		</div>
	</div>
	<div class="video-centen">

	</div>

	<div class="footer">
		<div id="page" class="page_div"></div>
	</div>

</div>
</div>
<% } %>

<script src="${ctxStatic}/m/js/media.js"></script>
<script src="${ctxStatic}/m/js/pageMe.js"></script>

<style>
.pull-right{
	/*display: flex;*/
	/*align-content: center;*/
	/*justify-content: space-between;*/
	/*width: 100%;*/
}

.box-title{
	display: flex!important;
	align-items: center;
	justify-content: start;
	min-width: 120px;
}
.buggngruog{
	margin-top: 4px;
	min-width: 100px;
	display: flex!important;
	align-items: center;
	justify-content: start;
}
.seach{
	display: flex!important;
	align-items: center;
	justify-content: end;
}
	.footer{
		display: flex;
		justify-content: end;

		padding: 10px 10px;
	}
	.seach{
		width: 72%;
		float: left;
	}
	.button-sr{
		float: left;
		position: absolute;
		right: 0;
		padding-right: 10px;
	}
	.video-centen{
		padding: 10px;
		display: flex;
		flex-wrap: wrap;
		justify-content: start;

	}
	.videoBox{
		margin: 10px 1.4vw;
		width: 22%;
		min-height: 180px;
		/*background-color: #00a0e9;*/
	}
	/*.videoBox:hover .video{*/
	/*	transform: scale(1.05);*/
	/*}*/
	.video{
		/*object-fit: cover;*/
		cursor: pointer;
		border-radius: 10px;
		width: 100%;
	    height: 9.5vw;
	}
	.page_div {

		color: #666;
		justify-items: end;
	}
	/* 页数按钮样式 */

	.page_div button {
		display: inline-block;
		min-width: 30px;
		height: 28px;
		cursor: pointer;
		color: #666;
		font-size: 13px;
		line-height: 28px;
		background-color: #f9f9f9;
		border: 1px solid #dce0e0;
		text-align: center;
		margin: 0 4px;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}

	#firstPage,
	#lastPage,
	#nextPage,
	#prePage {
		width: 50px;
		color: #0073A9;
		border: 1px solid #0073A9
	}

	#nextPage,
	#prePage {
		width: 70px
	}

	.page_div .current {
		background-color: #0073A9;
		border-color: #0073A9;
		color: #FFF
	}
	/* 页面数量 */

	.totalPages {
		margin: 0 10px
	}

	.totalPages span,
	.totalSize span {
		color: #0073A9;
		margin: 0 5px
	}
	/*button禁用*/

	.page_div button:disabled {
		opacity: .5;
		cursor: no-drop
	}
	.blue{
		cursor: pointer;
		color: blue;
	}
	.wordContent{
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.wordContent span{
		overflow: hidden;
		text-overflow:ellipsis;

		white-space: nowrap;
	}
	.layui-layer-title{
		color: darkred!important;
	}
	.w10{
		min-width: 20px;
	}
	.Wname{

	}
	.wCreate{
		width: 82%;
	}
</style>

<script>
	// 初始化DataGrid对象


	var pageNo=1
	var pageSize=12
	var videoName=''
	var videoDescribe=''
	var createBy=''
	var createDate=''
	var count=0
	var list=[]
	var num=0
	var that=[]

	function getList(){
		$.ajax({
			type: 'get',
			url: "${ctx}/video/dcSupVideo/listData",
			async :false,
			dataType: "json",
			data:{
				videoName: videoName,
				videoDescribe: videoDescribe,
				pageNo:pageNo,
				pageSize:pageSize
			},
			success:function (res) {
				list=res.list
				count=res.count

				res.list.forEach(function (item) {
					var html =""
					if('${@UserUtils.getUser().getUserCode()}' == 'system'){
						html =	'<span class="glyphicon glyphicon-trash blue w10"></span>'

					}
					$('.video-centen').append(
							'<div class="videoBox">' +
							'<video  class="video" controls="controls" allowfullscreen="true">'+
							'<source src="'+item.fileUrl+'" type="video/mp4">'+
							'</video>'+
							'<p class="wordContent">'+
							'<span class="wCreate" title="'+item.videoName+'">'+
							item.videoName+
							'</span>'+
							html+
							'</p>'+
							'</div>'
					)
				})
			}
		})
	}

	getList()



	function submit() {
		pageNo=1
		videoName=$('#videoName').val()
		videoDescribe=$('#videoDescribe').val()
		createBy=$('#createBy').val()
		createDate=$('#createDate').val()
		$('.video-centen').empty()
		getList()
		bl()
	}

	function reload() {
		$('#videoName').val('')
		$('#videoDescribe').val('')
		$('#createBy').val('')
		$('#createDate').val('')
		$('.video-centen').empty()
		videoName=''
		videoDescribe=''
		getList()
		bl()
	}

     function page(){
	$("#page").paging({
		pageNum: 1, // 当前页面
		totalNum: Math.ceil(count/pageSize), // 总页码

		callback: function(num) { //回调函数

			pageNo=num
			$('.video-centen').empty()
			getList()
			bl()
		}
	});
   }

   page()



	// function delete(val){
	// 	console.log(1)
	// }


	function bl(){
		$(".videoBox").each(function(){

			var num=$(this).index();  //index() 本元素的索引值  从0开始
			var that=$(this);

			that.on('click','.blue',function () {
				layer.open({
					title: '提示'
					,content: '您确定要删除此视频吗?',
					yes: function(){
						$.ajax({
							url:'${ctx}/video/dcSupVideo/delete',
							type:'get',
							data:{
								id:list[num].id
							},
							success:function (res) {

								$('.video-centen').empty()
								getList()
								page()
								bl()
							}
						})
					}
				});
			})
		})
	}
bl()


	$(document).ready(function () {
		var videos = document.getElementsByTagName("video");
		for(var i = 0; i <videos.length; i++ ){
			videos[i].addEventListener("playing",function(){
				var this1 = this;
				this.play();
				for(var j=0; j<videos.length; j++){
					var this2 = videos[j];
					if(this1 !== this2){
						this2.pause();
					};
				};
			});
		};
	})

</script>